/*
 * @Description: 
 * @Autor: 万洲
 * @Date: 2022-11-23 09:57:25
 * @LastEditors: 万洲
 * @LastEditTime: 2022-11-23 10:08:35
 */
import { ElButton, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon } from 'element-plus';
import { defineComponent, PropType, reactive } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue'
export default defineComponent({
    props: { options: { type: null as unknown as PropType<{ label: string, click: () => void | Promise<void> }[]>, default: () => [] } },
    setup: (props) => {
        const state = reactive({
        })
        const handleCommand: InstanceType<typeof ElDropdown>["$props"]["onCommand"] = (command) => {
            props.options[command].click()
        }
        return () => (
            <>
                <ElDropdown onCommand={handleCommand} v-slots={{
                    dropdown: () => {
                        return <ElDropdownMenu>
                            {props.options.map((item, index) => {
                                return <ElDropdownItem command={index}>{item.label}</ElDropdownItem>
                            })}
                        </ElDropdownMenu>
                    }
                }}>
                    <ElButton size='small'>
                        更多
                        <ElIcon><ArrowDown /></ElIcon>
                    </ElButton>
                </ElDropdown>

            </>
        )
    }
})
